<script>
import {ref, reactive, onMounted} from 'vue';
import { ElButton, ElForm, ElFormItem, ElInput, ElDialog, ElCascader, ElAutocomplete } from 'element-plus';
import axios from 'axios';
import {Bell} from "@element-plus/icons-vue";

export default {
  components: {
    Bell,
    ElButton,
    ElForm,
    ElFormItem,
    ElInput,
    ElDialog,
    ElCascader,
    ElAutocomplete,
  },
  data(){

    return {
      AgencyList: [],
      Agencychildren:[],
      HotelList: [],
      Hotelchildren:[],
      AttractionList:[],
      Attractionchildren:[],
      GuideList:[],
      Guidechildren:[],
      dialogVisible:false,
      form:'',
      selectedTripId:'',
      content:'',
      phoneNumber: ''
    }
  },

  methods: {
    async getList() {
      this.dialogVisible=true
      await axios.get('http://localhost:8083/TripTeam/TripTeam') // 根据实际情况修改接口地址
          .then(response => {
            this.AgencyList = response.data;
            console.log(this.AgencyList);
          })
          .catch(error => {
            console.error('获取旅游社列表失败:', error);
          });
      this.Agencychildren = this.AgencyList.map(team => ({
        value: {id: team.teamid, score:team.credit },
        label:team.teamname}));
      console.log(this.Agencychildren);
      await axios.get('http://localhost:8082/Hotel') // 根据实际情况修改接口地址
          .then(response => {
            this.HotelList = response.data;
            console.log(this.HotelList);
          })
          .catch(error => {
            console.error('获取旅游社列表失败:', error);
          });
      this.Hotelchildren = this.HotelList.map(hotel => ({
        value: { id: hotel.id, score: hotel.score },
        label: hotel.name}));
      console.log(this.Hotelchildren);
      await axios.get('http://localhost:8081/scenicSpot') // 根据实际情况修改接口地址
          .then(response => {
            this.AttractionList = response.data;
            console.log(this.AttractionList);
          })
          .catch(error => {
            console.error('获取旅游社列表失败:', error);
          });
      this.Attractionchildren = this.AttractionList.map(attraction => ({
        value: { id: attraction.id, score: attraction.score },
        label: attraction.name}));
      console.log(this.Attractionchildren);
        await axios.get('http://localhost:8084/guide') // 根据实际情况修改接口地址
          .then(response => {
            this.GuideList = response.data;
            console.log(this.GuideList);
          })
          .catch(error => {
            console.error('获取旅游社列表失败:', error);
          });
      this.Guidechildren = this.GuideList.map(guide => ({
        value: { id: guide.id, score: guide.score },
        label: guide.name}));
      console.log(this.Guidechildren);
     this.form = reactive({
      guideSelection: [],
      guideOptions: [
        {
          value: '03',
          label: '旅行社',
          children:this.Agencychildren
        },
        {
          value: '02',
          label: '酒店',
          children: this.Hotelchildren
        },
        {
          value: '01',
          label: '景区',
          children: this.Attractionchildren
        },
           {
          value: '04',
          label: '导游',
          children: this.Guidechildren
        }
      ],

      tripIdSuggestions: [
        {exitId: 'HT-2024-001'},
        {exitId: 'CS-2024-001'},
      ],
      selectedTripId:this.selectedTripId ,
    });
    },
    async onSubmit() {
      const now = new Date();

      const year = now.getFullYear();
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      const hours = ('0' + now.getHours()).slice(-2);
      const minutes = ('0' + now.getMinutes()).slice(-2);
      const seconds = ('0' + now.getSeconds()).slice(-2);

      const formattedTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      console.log(this.phoneNumber)
      console.log(this.content)
      console.log(formattedTime)
      console.log(this.selectedTripId)
      console.log('submit!', this.form);
      console.log(this.form.guideSelection[1].id)
      let score=(parseInt(this.form.guideSelection[1].score)-5).toString()
        await axios.post("http://localhost:8086/updateScore", {
          time:formattedTime,
          phone:this.phoneNumber,
          object:this.form.guideSelection[1].id,
          content:this.content,
          doingcontent:this.selectedTripId,
          score:score,
          state:this.form.guideSelection[0],
      },{headers: {
          'Content-Type':'application/json',
        },})
          .then(response => {
            // 请求成功，处理响应
            console.log('信息更新成功', response.data);
            // 你可以在这里根据响应更新UI或进行其他操作
          })
          .catch(error => {
            // 请求失败，处理错误
            if (error.response) {
              // 服务器返回了错误信息
              console.error('更新信息失败:', error.response.data);
            } else if (error.request) {
              // 请求已经发起，但没有收到响应
              console.error('请求已发送，但没有收到响应');
            } else {
              // 设置请求时触发了错误
              console.error('请求配置中发生错误');
            }
            // 在这里可以添加一些额外的错误处理逻辑，比如通知用户
          });
      this.dialogVisible = false; // Close the dialog after submission
    }
  },
  setup() {
    const handleGuideChange = (value) => {
      console.log('Selected guide:', value);
    };

    return {
      handleGuideChange,
    };
  }
};
</script>

<template>
  <div>
    <!-- Your original template content here -->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        background-color="#9d2933"
        text-color="#F2E6CE"
    >
      <el-menu-item index="0">
        <a>
          <router-link :to="{name:'Main'}" style="text-decoration: none; color: inherit;">
            <h1>旅游行业管理与运行调度系统</h1>
          </router-link>
        </a>
      </el-menu-item>
      <div class="flex-grow" />
      <el-button type="text" style="color: #F2E6CE; font-size: 26px;font-weight: bold;margin-top: 15px; margin-right: 20px;" @click="getList">意见反馈</el-button>
      <el-icon size="30px" color="#F2E6CE" style="padding-top: 15px;margin-right: 20px"><Bell /></el-icon>
      <el-avatar :size="50" :src="circleUrl" />
      <el-sub-menu index="2">
        <template #title style="color:#F2E6CE;">Username</template>
        <el-menu-item index="2-1" style="color:#F2E6CE;">logout</el-menu-item>
      </el-sub-menu>
    </el-menu>

    <!-- Dialog component -->
    <el-dialog title="意见反馈" v-model="dialogVisible" style="width: 100%; max-width: 600px;background-color: white;border-radius: 40px;padding: 50px 50px 50px 50px">
      <el-form :model="form" label-width="auto">
        <el-form-item label="选择对象">
          <el-cascader
              v-model="form.guideSelection"
              :options="form.guideOptions"
              @change="handleGuideChange"
              placeholder="请选择建议对象"
          />
        </el-form-item>
        <el-form-item label="行程单号" style="width: 290px">
     <el-input v-model="selectedTripId"
              style="width: 400px"
              placeholder="请输入行程单号"
     >

          <div id="targetElement" :data-value="selectedTripId">{{ selectedTripId }}</div>
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" style="width: 290px">
     <el-input v-model="phoneNumber"
              style="width: 400px"
              placeholder="请输入电话号"
     >

          <div id="targetElement" :data-value="phoneNumber">{{ phoneNumber }}</div>
          </el-input>
        </el-form-item>
        <el-form-item label="建议内容" >
          <el-input
              :autosize="{ minRows: 4, maxRows: 6 }"
              style="width: 400px"
              v-model="content"
              type="textarea"
              placeholder="请输入建议内容"
          />
          <div id="targetElement" :data-value="content">{{ content }}</div>
        </el-form-item>
        <el-form-item >
          <el-button style="margin-left: 220px" type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>



<style>
/* Your styles here */
.flex-grow {
  flex-grow: 1;
}
</style>